import React from 'react';
import './App.scss';
import { nanoid } from 'nanoid'
// import List from './components/List/index'

class App extends React.Component{
  
  state = {
    list: [],
    val:''
  }
  handlerChange = (e) => {
    // 通过e.target.value获取输入框中的值
    const val = e.target.value
    this.setState({
      val
    })
  }
  addTodos = () => {
    const { val ,list} = this.state
    list.push(val)
    this.setState({
      list
    })
  }
  render () {
    // 解析state
    const { list,val } = this.state
		return (
      <div>
        <p>欢迎来到腾讯会议</p>
        <h1>Hello.world</h1>
        <input type='text' placeholder='请输入'  value={val}  onChange={this.handlerChange}  ></input>
        <button  onClick={this.addTodos}>添加</button>
        {/* 把状态传给List 更新todos */}
        {/* <List todos={todos}/> */}
        <ul>
          {
            list.map((item,index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
		)
	}
}
export default App;
